<template>
  <div class="infinite-container">
    <mu-flexbox class="doctor-info bgwhite">
      <mu-flexbox-item :grow="0" basis="80px">
          <img v-lazy="DOCTOR_IMG_URL + doctorHome.doctorCode + '.jpg'"/>
      </mu-flexbox-item>
      <mu-flexbox-item>
        <div class="doctor-title">
          {{doctorHome.doctorName}}
          <small class="doctor-level">{{doctorHome.doctorLevel}}</small>
        </div>
        <div class="doctor-dept">
          所属科室 {{doctorHome.departmentName}}
        </div>
        <div class="doctor-good">
          <span class="export">擅长</span>
          {{doctorHome.doctorGoodAt || '暂无数据'}}
        </div>
      </mu-flexbox-item>
    </mu-flexbox>

    <div class="content-box mt10">
      <div class="content-title">
        <div class="re">预约挂号
          <span class="fr t3 f12 pr10" @click="moreSchedule">更多排班 > </span>
           <!-- <mu-date-picker hintTextClass="text-right" hintText="请选择" v-model="selectedDate"  style="opacity:0;position:absolute;top:0;right:10px;" @change="dateChange"/> -->
        </div>
      </div>
      <div class="content-content">
        <div class="select-time-info bgwhite">
          <div class="select-time-header">
          <div class="time-harfday">
              <div>日期</div>
              <div>上午</div>
              <div>下午</div>
            </div>
            <div class="time-fullday" style="overflow:hidden;">
              <div ref="scrollWrapper">
                <ul :style="'width:'+scrollWrapperWidth+'px;'">
                  <li v-for="(day, i) in days"  :class="['head', i===0 ? 'headActive' : '']" :key="day.orderDate">
                    <div>{{day.orderWeek2}}</div>
                    <div>{{day.orderDate1}}</div>
                  </li>
                  <li v-for="item in timeAM"  :key="item.name" :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '']" @click="appoint(item)">
                    <div>{{item.name}}</div>
                  </li>
                   <li v-for="item in timePM"  :key="item.name" :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '']" @click="appoint(item)">
                    <div>{{item.name}}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="time-footer t3">（排班信息以医院实际发布为准）</div>
        </div>

      </div>
    </div>

    <div class="content-box mt10">
        <div class="content-title">
          <div>医生擅长</div>
        </div>
        <div class="arrow">
          <i class="icon-arrowright iconfont"></i>
        </div>
      <div class="content-content ">
         <div style="padding:1em;">
          <div class="doctor-detail" v-html="doctorHome.doctorGoodAt || '暂无数据'">
          </div>
        </div>
      </div>
    </div>

    <div class="content-box mt10">
        <div class="content-title">
          <div>医生简介</div>
        </div>
        <div class="arrow">
          <i class="icon-arrowright iconfont"></i>
        </div>
      <div class="content-content ">
         <div style="padding:1em;">
          <div class="doctor-detail" v-html="doctorHome.doctorResume || '暂无数据'">
          </div>
        </div>
      </div>
    </div>

    <!--  dialog -->
    <mu-dialog :open="dialog" @close="close" dialogClass="appoint-dialog" titleClass="appoint-title" scrollable>
    <div class="dialog-header" slot="title">
      <h3>请选择预约时段</h3>
      <div class="tabs mt10" v-show="showTab">
        <span :class="[isActiveTab ? 'active':'']" @click="tabChange(1)">上午</span>
        <span :class="[!isActiveTab ? 'active' : '']"  @click="tabChange(2)">下午</span>
      </div>
    </div>
    <div class="dialog-main">
      <mu-flexbox class="text-center mt10">
        <mu-flexbox-item>
          <span class="t3">科室 </span>{{deptName}}
          </mu-flexbox-item>
        <mu-flexbox-item >
          <span class="t3">诊查费 </span><span class="t5">{{fee | fixedMoney}}</span>
          </mu-flexbox-item>
      </mu-flexbox>
      <select-time :times="times" v-if="times.length > 0"></select-time>
      <div class="no-data" v-else>没有数据</div>
    </div>
    <div slot="actions" class="dialog-close" @click="close">
      <i class="iconfont icon-close"></i>
    </div>
  </mu-dialog>

  <!-- text-datepicker -->
  <mu-dialog :open="textDialog" @close="textDialog=false"  dialogClass="appoint-dialog">
    <text-datepicker :dayText="dayText" @change="dateChange"></text-datepicker>
     <div slot="actions" class="dialog-close" @click="textDialog=false">
      <i class="iconfont icon-close"></i>
    </div>
  </mu-dialog>

  </div>
</template>

<script>
import {commonAjax, DOCTOR_IMG_URL} from '@/api/api'
import SelectTime from '@/components/SelectTime'
import {getWeekName} from '@/common/js/util'
import BScroll from 'better-scroll'
import TextDatepicker from '@/components/TextDatepicker'
export default {
  data () {
    return {
      DOCTOR_IMG_URL,
      doctor: JSON.parse(sessionStorage.doctor || '{}'),
      dept: JSON.parse(sessionStorage.dept || '{}'),
      days: [],
      times: [],
      timeAM: [],
      timePM: [],
      doctorService: '',
      Orders: {
        price: ''
      },
      dialog: false,
      activeClass: false,
      scrollWrapperWidth: 400,
      doctorHome: {
        listSchedule: []
      },
      isActiveTab: true,
      deptName: '',
      fee: 0,
      selectedDate: '',
      showTab: false,
      dayText: {},
      textDialog: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    tabChange (timeFlag) {
      this.isActiveTab = (timeFlag === 1)
      document.querySelector('.mu-dialog-body').scrollTop = 0
      this.getListdNumber({
        scheduleDate: this.selectedDate,
        timeFlag: timeFlag
      })
    },
    getTime () {
      // 获取排版周期
      return commonAjax('appointment/listScheduleCycle', {}, true)
    },
    moreSchedule () {
      this.textDialog = true
    },
    dateChange (value) {
      // todo
      if (!value.text || value.text[0] === '停诊') {
        return
      }
      this.textDialog = false
      this.showTab = true
      sessionStorage.selectedSchedule = JSON.stringify({scheduleDate: value.value})
      this.getListdNumber({
        scheduleDate: value.value,
        timeFlag: 1
      })
    },
    getDoctorHomePage () {
      let params = {
        departmentCode: this.doctor.departmentCode || '',
        doctorCode: this.doctor.doctorCode,
        doctorType: this.doctor.doctorType || '',
        outpatientTpye: 1
      }
      return commonAjax('appointment/getDoctorHomePage', params, true)
    },
    init () {
      let _this = this
      this.getTime().then(res => {
        if (res.data.code == 200) {
          let d1 = res.data.data
          d1.forEach((day, i) => {
            day.orderDate1 = day.date.slice(5)
            day.orderWeek2 = i === 0 ? '今日' : getWeekName(day.week)
            day.activeClass = false
          })
          this.days = d1
          this.scrollWrapperWidth = 54 * this.days.length
          // add AM and PM data
          for (let i = 0; i < this.days.length; i++) {
            this.timeAM.push({
              name: '',
              active: false,
              dis: false
            })
            this.timePM.push({
              name: '',
              active: false,
              dis: false
            })
          }
              this.getDoctorHomePage().then(res => {
                  if (res.data.code == 200) {
              this.doctorHome = res.data.data
              let listSchedule = this.doctorHome.listSchedule
              if (listSchedule.length > 0) {
                this.fee = listSchedule[0].regFee
                this.days.forEach((day, index) => {
                  listSchedule.forEach(value => {
                    _this.getSameDay(day, index, value)
                  })
                })
                let dayText = {}
                listSchedule.forEach(s => {
                  if (s.isStop === 1) {
                    dayText[s.scheduleDate] = ['停诊']
                  } else {
                    dayText[s.scheduleDate] = ['有号']
                  }
                })
                this.dayText = dayText
              }
              // refresh view
              this.$nextTick(() => { this._initScroll() })
            } else {
              this.$store.commit('UPDATE_TOAST', {
                message: res.data.message
              })
            }
          })
        }
      })
    },
    getSameDay (day, index, value) {
      let _this = this
      if (day.date === value.scheduleDate) {
        if (value.timeFlag === 1) {
          if (value.isStop === 1) {
            _this.timeAM.splice(index, 1, {name: '停诊', dis: true})
          } else if (value.scheduleCount === 0) {
            _this.timeAM.splice(index, 1, {name: '约满', dis: true})
          } else {
            _this.timeAM.splice(index, 1, {name: '预约', active: true, selectedSchedule: value})
          }
        } else {
          if (value.isStop === 1) {
            _this.timePM.splice(index, 1, {name: '停诊', dis: true})
          } else if (value.scheduleCount === 0) {
            _this.timePM.splice(index, 1, {name: '约满', dis: true})
          } else {
            _this.timePM.splice(index, 1, {name: '预约', active: true, selectedSchedule: value})
          }
        }
      }
    },
    confirmClick (item) {
      this.$router.push('/appointment/confirm-appoint')
    },
    close () {
      this.dialog = false
    },
    appoint (item) {
      if (!item.active) {
        return
      }
      this.showTab = false
      // 排班列表没有doctorId
      // item.doctor.localDoctorId = this.doctor.localDoctorId
      sessionStorage.selectedSchedule = JSON.stringify(item.selectedSchedule)
      this.getListdNumber(item.selectedSchedule)
    },
    getListdNumber (item) {
      let params = {
        departmentCode: this.doctorHome.departmentCode,
        doctorCode: this.doctorHome.doctorCode,
        schedulingDate: item.scheduleDate,
        doctorType: this.doctorHome.doctorType,
        timeFlag: item.timeFlag,
        outpatientTpye: 1
      }
      commonAjax('appointment/listNumber', params, true).then(res => {
          if (res.data.code == 200) {
          this.dialog = true
          // this.isActiveTab = timeFlag === 1
          this.deptName = this.dept.departmentName
          // this.fee = item.regFee
          res.data.data.forEach(v => {
            v.beginTime = v.beginTime.slice(11, 16)
            v.endTime = v.endTime.slice(11, 16)
          })
          this.times = res.data.data
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: '暂无号源'
          })
        }
      })
    },
    canOrderHandle () {
      this.showRange = true
      commonAjax().then(res => {
        if (res.data.code === 200) {
          let d = res.data.Orders
          this.Orders = d[0]
        }
        this.$nextTick(() => {
            })
      })
    },
    _initScroll () {
      this.scroll = new BScroll(this.$refs.scrollWrapper, {
        click: true,
        scrollX: true
      })
    }
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_TITLE')
  },
  components: {SelectTime, TextDatepicker}
}
</script>
<style lang="less" scoped>
@import '../../common/css/vars.less';
.doctor-info {
  padding: 10px;
  img {
    border-radius: 4px;
  }
}
.doctor-title {
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;
  }
.doctor-level {
    font-size: 12px;
    padding:0 3px;
    color: @color-price;
    border-radius: 6px;
    border:1px solid @color-price;
}
.doctor-dept {
    color: #666;
    padding: 6px 0;
}
.doctor-good {
   color: #666;
    height: 1.6em;
    margin-bottom: 0;
    overflow: hidden;
    margin-top: 0;
    .export {
      background-color: #FFAD28;
      font-size: 12px;
      padding: 0 2px;
      border-radius: 2px;
      color: #fff;
    }
}
.select-time-info {
  text-align: center;
  border-bottom: 1px solid @color-border;
  .select-time-header {
    flex-wrap:nowrap;
    justify-content:flex-start;
    display: -webkit-flex;
    display: flex;
  }
  .time-harfday {
    border-right: 1px solid @color-border;
    -webkit-flex-grow: 0;
    -webkit-flex-shrink: 0;
    -webkit-flex-basis: 30px;
    div {
      padding:4px 6px;
      color: #999;
      border-bottom: 1px solid @color-border;
    }
  }
  .time-fullday {
    li {
      float: left;
      width: 54px;
      border-right:1px solid @color-border;
      border-bottom:1px solid @color-border;
      padding: 4px;
      height: 51px;
      &.active{
        color: @color-primary;
        background: #EBF8F1;
      }
      &.head{
        border-left:none;
        &.headActive{
          color: @color-primary;
        }
      }
      &.foot{
        line-height: 43px;
        color: #999;
        &.footActive{
          color: @color-primary;
          background: #EBF8F1;
        }
        &.footDis{
          color: @color-gray;
          // background: #d5d5d5;
        }
      }
    }
  }
  .time-footer{
    text-align: right;
    padding: 1em;
  }
}
</style>
